import React, { useCallback, useContext } from 'react';
import { Divider, Modal } from 'antd';
import { Toolbar } from 'gg-editor';
import PubSub from 'pubsub-js';
import ToolbarButton from './ToolbarButton';
import ToolsaveButton from './ToolsaveButton';
import styles from './index.less';
import FlowContext from '../../FlowContext';
import useEditorAPI from './useEditorAPI';
import request from '@/utils/request';
import ToolRunButton from './ToolRunButton';
import ProcessRunModal from '@/pages/ProcessManager/ProcessRun/ProcessRunModal';

const FlowToolbar = ({ handleSave }) => {
  const { state } = useContext(FlowContext);

  const { readOnly, processId, versionId } = state;

  const { remove, getSelected } = useEditorAPI();

  const handleRemove = useCallback(() => {
    const item = getSelected();
    if (!item) {
      return;
    }
    const { nodeType, nodeId } = item;
    if (nodeType === 'Start' || nodeType === 'End' || !nodeId) {
      remove();
      return;
    }
    Modal.confirm({
      title: '你正在删除已经配置过的节点',
      content: '删除后节点配置不能还原，请谨慎操作',
      onOk() {
        const element = nodeType.charAt(0).toLowerCase() + nodeType.slice(1);
        const elementId = `${element}Id`;
        request.post(`/${element}/delete${nodeType}?${elementId}=${nodeId}`).then(() => {
          remove();
          PubSub.publish(`onNodeRemove_${processId}_${versionId}`);
        });
      },
    });
  }, [getSelected, processId, remove, versionId]);

  return (
    <Toolbar className={styles.toolbar}>
      {readOnly ? null : (
        <>
          <ToolbarButton command="undo" text="撤销" />
          <ToolbarButton command="redo" text="重做" />
          <Divider type="vertical" />
        </>
      )}

      {readOnly ? null : (
        <>
          {/* <ToolbarButton command="copy" text="复制" />
          <ToolbarButton command="paste" text="粘贴" /> */}
          <ToolbarButton icon="delete" text="删除" onClick={handleRemove} />
          <Divider type="vertical" />
        </>
      )}

      <ToolbarButton command="zoomIn" icon="zoom-in" text="放大" />
      <ToolbarButton command="zoomOut" icon="zoom-out" text="缩小" />
      {/* <ToolbarButton command="autoZoom" icon="fit-map" text="适应尺寸" /> */}
      {/* <ToolbarButton command="resetZoom" icon="actual-size" text="正常尺寸" /> */}
      {/* <Divider type="vertical" />
      <ToolbarButton command="toBack" icon="to-back" text="向后" />
      <ToolbarButton command="toFront" icon="to-front" text="向前" /> */}
      {/* <Divider type="vertical" /> */}
      {/* <ToolbarButton command="multiSelect" icon="multi-select" text="多选" /> */}
      {/* <ToolbarButton command="addGroup" icon="group" text="建组" /> */}
      {/* <ToolbarButton command="unGroup" icon="ungroup" text="撤组" /> */}

      {readOnly ? null : (
        <>
          <Divider type="vertical" />
          <ToolsaveButton icon="save" text="保存" handleSave={handleSave} />
        </>
      )}

      <Divider type="vertical" />
      <ProcessRunModal processId={processId} versionId={versionId}>
        <ToolRunButton text="流程试跑" />
      </ProcessRunModal>

      <Divider type="vertical" />
      <span className="text-danger margin-left">
        注意，在保存流程图之前退出绘制页面会导致数据的丢失！
      </span>
    </Toolbar>
  );
};

export default FlowToolbar;
